<template>
  <el-upload
    action="#"
    list-type="picture-card"
    :auto-upload="false"
    ref="pictureUpload"
  >
    <i slot="default" class="el-icon-plus"></i>
    <div>
      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
      <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <el-icon><zoom-in /></el-icon>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <el-icon><Download /></el-icon>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <el-icon><Delete /></el-icon>
        </span>
      </span>
    </div>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
import type { UploadFile } from "element-plus";
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);
const file=ref({
    url:""
})
const handleRemove = (file) => {
  // ⭐ 获取到该组件调用handleRemove方法删除file对象
  // $refs.pictureUpload.handleRemove(file)
};
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
};
const handleDownload = (file) => {
  console.log(file);
};
</script>
